<template>
	<view class="filter-list">
		<view class="filter-content">
			<view v-for="(item, index) in filterList" :key="index" class="filter-item">
				<view class="filter-title">{{ item.label }}</view>
				
				<input v-if="item.type === 'input'" type="text" :placeholder="item.placeholder" v-model="filterData[item.prop]" />
				<van-row v-else-if="item.type === 'select-btn'" :gutter="8">
					<van-col v-for="(it, idx) in item.options" :key="idx" :span="8" >
						<div
							class="option-item flex-center pr"
							:class="{ active: filterData[item.prop] && filterData[item.prop].includes(it.value) }"
							@click="onChangeFilter(item.prop, it.value)"
						>
							<van-icon name="success" color="rgb(99, 93, 247)" size="16" />
							{{ it.label }}
						</div>
					</van-col>
				</van-row>
			</view>
		</view>
		
		<view class="btns">
			<van-row :gutter="15">
				<van-col :span="10">
					<van-button @click="onReset" block color="rgb(243,243,243)" class="reset">重置</van-button>
				</van-col>
				<van-col :span="14">
					<van-button @click="onConfirm" block round color="linear-gradient(0deg, rgb(99, 93, 247) 0%, rgb(165, 173, 246) 100%)">确定</van-button>
				</van-col>
			</van-row>
		</view>
	</view>
</template>

<script>
export default {
	props: {
		filterList: {
			type: Array,
			required: true
		}
	},
	options: {
		styleIsolation: 'shared',
	},
	data() {
		return {
			filterData: {}
		}
	},
	methods: {
		onChangeFilter(prop, value) {
			if (!this.filterData[prop]) {
				this.$set(this.filterData, prop, []);
			}
			if (this.filterData[prop].includes(value)) {
				this.filterData[prop].splice(this.filterData[prop].indexOf(value), 1)
			} else {
				this.filterData[prop].push(value);
			}
		},
		onConfirm() {
			this.$emit('confirm', this.filterData);
		},
		onReset() {
			this.filterData = {};
			this.$emit('reset');
		},
	}
}
</script>

<style scoped lang="scss">
.filter-list {
	.filter-content {
		padding: 10rpx 30rpx;
		border-bottom: solid 2rpx rgb(190,190,190);
		
		.filter-title {
			font-size: 28rpx;
			font-weight: 700;
			line-height: 28rpx;
			margin-bottom: 20rpx;
		}
		
		input {
			padding: 0 30rpx;
			height: 60rpx;
			font-size: 26rpx;
			background-color: rgba(243, 247, 250, 0.95);
			border-radius: 33rpx;
		}
		
		.filter-item {
			margin-bottom: 39rpx;
		}
			
		.option-item {
			width: 100%;
			font-size: 24rpx;
			font-weight: 500;
			background-color: rgb(243,243,243);
			border-radius: 10rpx;
			height: 60rpx;
			margin-bottom: 16rpx;
			
			&.active {
				background-color: rgba(99, 93, 247, 0.2);
				color: rgb(99,93,247);
				
				/deep/.van-icon {
					display: block;
				}
			}
			
			/deep/.van-icon {
				position: absolute;
				top: 50%;
				transform: translateY(-50%);
				left: 20%;
				display: none;
			}
		}
	}
	
	.btns {
		padding: 25rpx 40rpx 22rpx;
		
		/deep/.van-button {
			font-size: 32rpx;
			font-weight: 700;
		}
		
		.reset /deep/.van-button {
			color: rgb(136,136,136) !important;
		}
	}
}
</style>